<!DOCTYPE html>
<html>
<head>
	<title>TheyTube - Watch free videos online</title>
<link rel="stylesheet" href="css/spectre.min.css">
<link rel="stylesheet" href="css/spectre-icons.min.css">
<meta name="theme-color" content="#ddd">
<script src="js/vue.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <script type="text/javascript">
  		window.serverAddr='101.200.54.63:9999'
  		function setCookie(cname,cvalue,exdays){
  		  var d = new Date();
  		  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  		  var expires = "expires="+d.toGMTString();
  		  document.cookie = cname + "=" + cvalue + "; " + expires;
  		}
  		function getCookie(cname){
  		  var name = cname + "=";
  		  var ca = document.cookie.split(';');
  		  for(var i=0; i<ca.length; i++) 
  		  {
  		    var c = ca[i].trim();
  		    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  		  }
  		  return "";
  		}
      function testImg(str) {
        document.getElementById("upload-img-test").src=str
      }
      function showInfo(str) {
        window.modalInfo.Info=str
        document.getElementById("modal-info").className='modal active'
      }
      function upload(me) {
        var info=document.getElementById("upload-info")
        var progress=document.getElementById("upload-progress")
        var obj=new Object()
        obj.Title=window.uploadPage.Title
        obj.Introduction=window.uploadPage.Introduction
        obj.Cover=window.uploadPage.Cover
        obj.Clips=window.uploadPage.Clips
        obj.State="upload"
        obj.Info=getCookie("TheyTubeSessionID")
        if (obj.Title==''||obj.Cover=='') {
            info.innerHTML='信息未填写完整'
            info.className='label-error'
            info.style.display = 'block'
            return
        }
        for (clip in obj.Clips){
          if (clip.Title=='') {
            info.innerHTML='信息未填写完整'
            info.style.display = 'block'
            return
          }
          for (link in clip.Links){
            if (link=='') {
              info.innerHTML='信息未填写完整'
              info.style.display = 'block'
              return
            }
          }
        }
        info.style.display = 'none'
        me.style.display = 'none'
        progress.style.display = 'block'
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsUpload")
        ws.onopen=function(evt) {
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          progress.style.display = 'none'
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
            info.innerHTML='上传成功'
            info.style.display = 'block'
            setTimeout("location.href='index.html'", 1000)
          }else if (gobj.Info=="ERR") {
            info.innerHTML=gobj.Info
            info.style.display = 'block'
            me.style.display = 'block'
          }
          ws.close()
        }
        ws.onclose=function(evt) {
          console.log('upload on close')
        }
        ws.onerror=function(evt) {
          console.log('upload on err : '+evt.data)
        }
      }
      function edit(me) {
        var info=document.getElementById("edit-info")
        var progress=document.getElementById("edit-progress")
        var obj=new Object()
        obj.Title=window.modalEdit.Title
        obj.Introduction=window.modalEdit.Introduction
        obj.Cover=window.modalEdit.Cover
        obj.Clips=window.modalEdit.Clips
        obj.State="edit"
        obj.Vid=window.modalEdit.Vid
        obj.Info=getCookie("TheyTubeSessionID")
        if (obj.Title==''||obj.Cover=='') {
            info.innerHTML='信息未填写完整'
            info.className='label-error'
            info.style.display = 'block'
            return
        }
        for (clip in obj.Clips){
          if (clip.Title=='') {
            info.innerHTML='信息未填写完整'
            info.style.display = 'block'
            return
          }
          for (link in clip.Links){
            if (link=='') {
              info.innerHTML='信息未填写完整'
              info.style.display = 'block'
              return
            }
          }
        }
        info.style.display = 'none'
        me.style.display = 'none'
        progress.style.display = 'block'
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsEditVideo")
        ws.onopen=function(evt) {
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          progress.style.display = 'none'
          console.log(evt.data)
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
            info.innerHTML='修改成功'
            info.style.display = 'block'
            setTimeout("document.getElementById('modal-edit').className='modal';document.getElementById('edit-info').style.display = 'none';document.getElementById('edit-submit').style.display = 'block'", 500)
          }else if (gobj.Info=="ERR") {
            info.innerHTML=gobj.Info
            info.style.display = 'block'
            me.style.display = 'block'
          }
          ws.close()
        }
        ws.onclose=function(evt) {
          console.log('edit on close')
        }
        ws.onerror=function(evt) {
          console.log('edit on err : '+evt.data)
        }
      }
  		function login() {
        var result=document.getElementById("login-info")
  			var obj=new Object()
  			obj.Email=document.getElementById("login-email").value
  			obj.Password=document.getElementById("login-password").value
  			if (obj.Email=="") {
          result.innerHTML='Email不能为空'
  				return
  			}
  			if (obj.Password=="") {
          result.innerHTML='密码不能为空'
  				return
  			}
  			var me=document.getElementById("login-submit")
  			me.disabled='disabled'
  			document.getElementById('login-progress').style.display = 'block'
  			var ws=new WebSocket("ws://"+window.serverAddr+"/wsLogin")
  			ws.onopen=function(evt) {
  				console.log('on open')
  				ws.send(JSON.stringify(obj))
  			}
  			ws.onmessage=function(evt) {
  				console.log(evt.data)
  				var obj=JSON.parse(evt.data)
  				if (obj.State=="OK") {
  					setCookie("TheyTubeSessionID",obj.Info,365)
  					location.href='index.html'
  				}else if (obj.State=="ERR") {
  					result.innerHTML=obj.Info
  				}
  				ws.close()
  			}
			  ws.onclose=function(evt){
				  console.log('on close')
				  document.getElementById('login-progress').style.display = 'none'
  				me.disabled=''
        }
        ws.onerror=function(evt){
        		console.log(evt.data)
        		result.innerHTML="服务器不可用"
        }
  		}
  		function register() {
  			var result=document.getElementById("register-info")
        var obj=new Object()
        obj.Email=document.getElementById("register-email").value
        obj.Password=document.getElementById("register-password").value
        if (obj.Email=="") {
          result.innerHTML='Email不能为空'
          return
        }
        if (obj.Password=="") {
          result.innerHTML='密码不能为空'
          return
        }
        var me=document.getElementById("register-submit")
        me.disabled='disabled'
        document.getElementById('register-progress').style.display = 'block'
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsRegister")
        ws.onopen=function(evt) {
          console.log('on open')
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          console.log(evt.data)
          var obj=JSON.parse(evt.data)
          if (obj.State=="OK") {
            setCookie("TheyTubeSessionID",obj.Info,365)
            location.href='index.html'
          }else if (obj.State=="ERR") {
            result.innerHTML=obj.Info
          }
          ws.close()
        }
        ws.onclose=function(evt){
          console.log('on close')
          document.getElementById('register-progress').style.display = 'none'
          me.disabled=''
        }
        ws.onerror=function(evt){
            console.log(evt.data)
            result.innerHTML="服务器不可用"
        }
  		}
      function switchTab(target,str_id) {
        document.getElementById("tab-home").className='tab-item'
        document.getElementById("tab-new").className='tab-item'
        document.getElementById("tab-me").className='tab-item'
        target.className='tab-item active'
        document.getElementById("homePage").style.display = 'none'
        document.getElementById("newPage").style.display = 'none'
        document.getElementById("mePage").style.display = 'none'
        document.getElementById(str_id).style.display = 'block'
      }
      function getNewData(pageNum) {
        var obj=new Object()
        obj.State="new"
        obj.Info=pageNum.toString()
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsNew")
        ws.onopen=function(evt) {
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
            window.newPage.videos=gobj.Data
            window.newPage.CurPage=pageNum
            var maxPage=new Number(gobj.Info)
            if (window.newPage.CurPage<=1) {
              document.getElementById("new-prevPage").disabled='disabled'
            }else {
              document.getElementById("new-prevPage").disabled=''
            }
            if (window.newPage.CurPage>=maxPage) {
              document.getElementById("new-nextPage").disabled='disabled'
            }else {
              document.getElementById("new-nextPage").disabled=''
            }
          }else{
            console.log('new err : '+gobj.Info)
          }
          ws.close()
        }
        ws.onclose=function(evt) {
          console.log('new on close')
        }
        ws.onerror=function(evt) {
          console.log('new on err : '+evt.data)
        }
      }
      function getMyVideos(pageNum) {
        var obj=new Object()
        obj.State=window.mePage.Email
        obj.Info=pageNum.toString()
        var ws=new WebSocket("ws://"+window.serverAddr+"/wsGetMyVideos")
        ws.onopen=function(evt) {
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
            window.mePage.Videos=gobj.Data
            window.mePage.CurPage=pageNum
            var maxPage=new Number(gobj.Info)            
            if (window.mePage.CurPage<=1) {
              document.getElementById("me-prevPage").disabled='disabled'
            }else {
              document.getElementById("me-prevPage").disabled=''
            }
            if (window.mePage.CurPage>=maxPage) {
              document.getElementById("me-nextPage").disabled='disabled'
            }else {
              document.getElementById("me-nextPage").disabled=''
            }
          }else{
            console.log('my err : '+gobj.Info)
          }
          ws.close()
        }
        ws.onclose=function(evt) {
          console.log('my on close')
        }
        ws.onerror=function(evt) {
          console.log('my on err : '+evt.data)
        }
      }
      function mSearch() {
        var q=document.getElementById('search-input').value;
        if(q!=''){
          window.open('/search.html?q='+encodeURIComponent(q))
        }
      }
  		function doOnLoad() {
        document.getElementById("search-input").onkeyup=function(e) {
          if (e.keyCode==13) {mSearch()}
        }
  			var sid=getCookie('TheyTubeSessionID')
        if (sid==''||sid==null) {return;}
        var obj=new Object()
        obj.State='home'
        obj.Info=sid
        var ws=new WebSocket("ws://"+window.serverAddr+"/wshome")
        ws.onopen=function(evt) {
          console.log('home on open')
          ws.send(JSON.stringify(obj))
        }
        ws.onmessage=function(evt) {
          console.log('home on msg:'+evt.data)
          var gobj=JSON.parse(evt.data)
          if (gobj.State=="OK") {
            window.mePage.LoggedIn=true
            window.mePage.Email=gobj.Info
            window.mePage.EmailURL='/user.html?email='+encodeURIComponent(gobj.Info)
            setTimeout("getMyVideos(1)", 100)
          }else if (gobj.State=="ERR") {
            setCookie('TheyTubeSessionID','',0)
            showInfo(gobj.Info)
          }
          ws.close()
        }
        ws.onclose=function(evt) {console.log('home on close');}
        ws.onerror=function(evt) {console.log('home on err:'+evt.data);showInfo("服务器不可用");}
  		}
  </script>
  <style>
  .tab-content{
    display: none;
    max-width: 700px;
    width: 100%;
  }
  a{
    cursor: pointer;
    text-decoration: none;
    color: #555;
  }
  .row-container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  .card{
    margin: 10px;
    box-shadow: 3px 3px 3px #ddd;
  }
	</style>
</head>
<body style="padding: 0px;margin: 0px;">
<div style="display: flex;flex-direction: column;align-items: center;box-shadow: 2px 2px 2px #ddd;">
  <div style="display: flex;width: 100%; justify-content: space-between;align-items: center;">
    <span style="padding: 5px;color: #000;"><b>TheyTube</b></span>
    <i class="icon icon-search" onclick="document.getElementById('modal-search').className='modal active'" style="padding: 10px;color: #000;"></i>
  </div>
  <div style="max-width: 700px;width: 100%;">
    <ul class="tab tab-block" style="margin: 0px;">
      <li class="tab-item" id="tab-home" onclick="switchTab(this,'homePage')">
        <a>精选</a>
      </li>
      <li class="tab-item active" id="tab-new" onclick="switchTab(this,'newPage')">
        <a>新上传</a>
      </li>
      <li class="tab-item" id="tab-me" onclick="switchTab(this,'mePage')">
        <a>我</a>
      </li>
    </ul>
  </div>
</div>
<div style="display: flex;flex-direction: column;align-items: center;">
<div id="homePage" class="tab-content">
 home
</div>
<div id="newPage" class="tab-content" style="display: block;">
  <div v-for="(video,vindex) in videos" class="card">
    <div class="card-image" v-on:click="jmp(video.Vid)">
      <img :src="video.Cover" class="img-responsive">
    </div>
    <div class="card-header" v-on:click="jmp(video.Vid)">
      <div class="card-title h5">{{video.Title}}</div>
      <div class="card-subtitle text-gray">{{video.Introduction}}</div>
    </div>
  </div>
  <div style="display: flex;justify-content: space-between;margin: 20px;">
    <button id="new-prevPage" class="btn" disabled onclick="getNewData(window.newPage.CurPage-1)">上一页</button>
    <span>{{CurPage}}</span>
    <button id="new-nextPage" class="btn" onclick="getNewData(window.newPage.CurPage+1)">下一页</button>
  </div>
</div>
<div id="mePage" class="tab-content">
  <div v-if="LoggedIn">
    <ul class="menu">
      <li class="divider" data-content="账号"></li>
      <li class="menu-item"><a target="_blank" :href="EmailURL"><i class="icon icon-people"></i> {{Email}}</a></li>
      <li class="divider" data-content="视频"></li>
      <li class="menu-item"><a onclick="document.getElementById('modal-upload').className='modal active'"><i class="icon icon-upload"></i>上传</a></li>
      <li class="divider"></li>
      <li class="menu-item">
        <a onclick="document.getElementById('modal-settings').className='modal active'"><i class="icon icon-menu" ></i> 设置</a>
      </li>
    </ul><br>
    <div class="divider" data-content="我的视频"></div>
    <div v-for="(video,vindex) in Videos" style="display: flex;flex-direction: row;align-items: center;">
      <img :src="video.Cover" width="160" height="90" v-on:click="jmp(video.Vid)">
      <div style="margin-left: 20px;">
        <div v-on:click="jmp(video.Vid)"><b>{{video.Title}}</b></div>
        <div style="display: flex;flex-direction: row;align-items: stretch;">
          <a v-on:click="jmp(video.Vid)">查看</a>
          <a v-on:click="showEdit(vindex)" style="margin-left: 20px;">修改</a>
          <a v-on:click="deleteVideo(vindex)" style="margin-left: 20px;">删除</a>
        </div>
      </div>
    </div>
    <div style="display: flex;justify-content: space-between;margin: 20px;">
      <button id="me-prevPage" class="btn" disabled onclick="getMyVideos(window.mePage.CurPage-1)">上一页</button>
      <span>{{CurPage}}</span>
      <button id="me-nextPage" class="btn" onclick="getMyVideos(window.mePage.CurPage+1)">下一页</button>
    </div>
  </div>
  <div v-else>
    <ul class="menu">
      <li class="divider" data-content="账号"></li>
      <li class="menu-item">
          <a onclick="document.getElementById('modal-login').className='modal active'"><i class="icon icon-people"></i> 登录</a>
          <a onclick="document.getElementById('modal-register').className='modal active'"><i class="icon icon-people"></i> 注册</a>
      </li>
    </ul>
  </div>
</div>
</div>

<div class="modal" id="modal-login">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-login').className='modal'"></button>
      <div class="modal-title"><b>登录</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        <input type="text" id="login-email" name="email" class="form-input" placeholder="Email"><br>
        <input type="password" id="login-password" name="password" class="form-input" placeholder="密码" maxlength="25" minlength="6">
        <span id="login-info" style="color: red;"></span>
        <div class="loading" style="margin-top: 5px;display: none;" id="login-progress"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-lg" onclick="login()" id="login-submit">登录</button>
    </div>
  </div>
</div>
<div class="modal" id="modal-register">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-register').className='modal'"></button>
      <div class="modal-title"><b>注册</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        <input type="text" id="register-email" name="email" class="form-input" placeholder="Email"><br>
        <input type="password" id="register-password" name="password" class="form-input" placeholder="密码" maxlength="25" minlength="6">
        <span id="register-info" style="color: red;"></span>
        <div class="loading" style="margin-top: 5px;display: none;" id="register-progress"></div>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-lg" onclick="register()" id="register-submit">注册</button>
    </div>
  </div>
</div>
<div class="modal" id="modal-info">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-info').className='modal'"></button>
      <div class="modal-title"><b>提示</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        {{Info}}
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal-confirm">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-confirm').className='modal'"></button>
      <div class="modal-title"><b>提示</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        {{Info}}
      </div>
    </div>
    <div class="modal-footer">
      <div class="content">
        <button class="btn" onclick="document.getElementById('modal-confirm').className='modal'">取消</button>
        <button class="btn" v-on:click="onconfirmed()">确定</button>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal-settings">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-settings').className='modal'"></button>
      <div class="modal-title"><b>设置</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
        <ul class="menu">
          <li class="menu-item"><a onclick="setCookie('TheyTubeSessionID','',0);location.href='index.html';"><i class="icon icon-forward"></i>退出账号</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal-upload">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-upload').className='modal'"></button>
      <div class="modal-title"><b>上传</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
          <div class="divider" data-content="基本信息"></div>
          <div>
            <input type="text" class="form-input" placeholder="总标题" minlength="1" v-model="Title">
            <input type="text" class="form-input" placeholder="介绍"  v-model="Introduction">
            <div class="row-container"><div style="flex-grow: 1;"><input minlength="1" type="text" class="form-input" v-model="Cover" placeholder="封面链接"></div><a style="flex-grow: 0" onclick="testImg(window.uploadPage.Cover)">测试</a></div>
          </div><br>
          <ol class="menu">
            <div class="divider" data-content="分集"></div>
            <li class="menu-item" v-for="(clip,cindex) in Clips">
              <input type="text" class="form-input" minlength="1" placeholder="集标题" v-model="Clips[cindex].Title">
              <div v-for="(link,lindex) in clip.Links">
                <div class="row-container"><div style="flex-grow: 1;">
                  <input class="form-input" minlength="1" type="text" placeholder="视频链接" v-model="Clips[cindex].Links[lindex]">
                </div><a style="flex-grow: 0" v-on:click="testVideo(Clips[cindex].Links[lindex])">测试</a></div>
              </div>
              <button style="color: #333;" class="btn btn-link" v-on:click="Clips[cindex].Links.push('')"><small>添加备用链接</small></button>
              <button style="color: #333;" class="btn btn-link" v-on:click="Clips[cindex].Links.pop()" v-if="Clips[cindex].Links.length > 1"><small>删除链接</small></button>
            </li>
            <button class="btn btn-link" style="color: #555;" onclick="window.uploadPage.Clips.push({Title:'',Links:['']})">添加集</button>
            <button class="btn btn-link" style="color: #555;" onclick="window.uploadPage.Clips.pop()" v-if="Clips.length > 1">删除集</button>
          </ol>
          <br><br>
          <div class="divider" data-content="测试可播放性"></div>
          <video id="upload-v-test" autoplay controls class="video-responsive"></video><br>
          <img id="upload-img-test" style="width: 100%" class="img-responsive"><br>
          <div class="loading" id="upload-progress" style="display: none;"></div>
          <div align="center" style="color: #000;" id="upload-info"></div>
          <button style="display: block;width: 100%;" class="btn" onclick="upload(this)">上传</button>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal-edit">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-edit').className='modal'"></button>
      <div class="modal-title"><b>修改</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
          <div class="divider" data-content="基本信息"></div>
          <div>
            <input type="text" class="form-input" placeholder="总标题" minlength="1" v-model="Title">
            <input type="text" class="form-input" placeholder="介绍"  v-model="Introduction">
            <div class="row-container"><div style="flex-grow: 1;"><input minlength="1" type="text" class="form-input" v-model="Cover" placeholder="封面链接"></div><a style="flex-grow: 0" onclick="document.getElementById('edit-img-test').src=window.modalEdit.Cover">测试</a></div>
          </div><br>
          <ol class="menu">
            <div class="divider" data-content="分集"></div>
            <li class="menu-item" v-for="(clip,cindex) in Clips">
              <input type="text" class="form-input" minlength="1" placeholder="集标题" v-model="Clips[cindex].Title">
              <div v-for="(link,lindex) in clip.Links">
                <div class="row-container"><div style="flex-grow: 1;">
                  <input class="form-input" minlength="1" type="text" placeholder="视频链接" v-model="Clips[cindex].Links[lindex]">
                </div><a style="flex-grow: 0" v-on:click="testVideo(Clips[cindex].Links[lindex])">测试</a></div>
              </div>
              <button style="color: #333;" class="btn btn-link" v-on:click="Clips[cindex].Links.push('')"><small>添加备用链接</small></button>
              <button style="color: #333;" class="btn btn-link" v-on:click="Clips[cindex].Links.pop()" v-if="Clips[cindex].Links.length > 1"><small>删除链接</small></button>
            </li>
            <button class="btn btn-link" style="color: #555;" onclick="window.modalEdit.Clips.push({Title:'',Links:['']})">添加集</button>
            <button class="btn btn-link" style="color: #555;" onclick="window.modalEdit.Clips.pop()" v-if="Clips.length > 1">删除集</button>
          </ol>
          <br><br>
          <div class="divider" data-content="测试可播放性"></div>
          <video id="edit-v-test" autoplay controls class="video-responsive"></video><br>
          <img id="edit-img-test" style="width: 100%" class="img-responsive"><br>
          <div class="loading" id="edit-progress" style="display: none;"></div>
          <div align="center" style="color: #000;" id="edit-info"></div>
          <button style="display: block;width: 100%;" id="edit-submit" class="btn" onclick="edit(this)">修改</button>
      </div>
    </div>
  </div>
</div>
<div class="modal" id="modal-search">
  <div class="modal-overlay"></div>
  <div class="modal-container">
    <div class="modal-header">
      <button class="btn btn-clear float-right" onclick="document.getElementById('modal-search').className='modal'"></button>
      <div class="modal-title"><b>搜索</b></div>
    </div>
    <div class="modal-body">
      <div class="content">
         <input type="text" class="form-input" id="search-input">
         <button style="float: right;" onclick="mSearch()" class="btn btn-primary">搜索</button>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  window.newPage=new Vue({
    el:'#newPage',
    data:{
      videos:[],
      CurPage:1,
      jmp:function(str) {
        window.open('/video.html?vid='+str)
      }
    }
  })
  window.mePage=new Vue({
    el:'#mePage',
    data:{
      LoggedIn:false,
      Email:'',
      EmailURL:'',
      Videos:[],
      CurPage:1,
      jmp:function(str) {
        window.open('/video.html?vid='+str)
      },
      showEdit:function(vindex) {
        var v=window.mePage.Videos[vindex]
        window.modalEdit.Title=v.Title
        window.modalEdit.Introduction=v.Introduction
        window.modalEdit.Cover=v.Cover
        window.modalEdit.Clips=v.Clips
        window.modalEdit.Vid=v.Vid
        document.getElementById('modal-edit').className='modal active'
      },
      deleteVideo:function(vindex) {
        window.modalConfirm.Info="确认删除吗？"
        window.modalConfirm.onconfirmed=function() {
          document.getElementById('modal-confirm').className='modal'
          var obj=new Object()
          obj.State=window.mePage.Videos[vindex].Vid
          obj.Info=getCookie("TheyTubeSessionID")
          var ws=new WebSocket("ws://"+window.serverAddr+"/wsDeleteVideo")
          ws.onopen=function(evt) {
            ws.send(JSON.stringify(obj))
          }
          ws.onmessage=function(evt) {
            var gobj=JSON.parse(evt.data)
            if (gobj.State=="OK") {
              window.mePage.Videos.splice(vindex, 1)
              showInfo("删除成功")
            }else if (gobj.State=="ERR") {
              showInfo(gobj.Info)
            }
            ws.close()
          }
          ws.onerror=function(evt) {
            console.log('deleteVideo on err :'+evt.data)
          }
        }
        document.getElementById("modal-confirm").className='modal active'
      }
    }
  })
  window.uploadPage=new Vue({
    el:"#modal-upload",
    data:{
      Title:'',
      Introduction:'',
      Cover:'',
      Clips:[
        {Title:'',Links:['']}
      ],
      testVideo:function(str) {
        document.getElementById("upload-v-test").src=str
      }
    }
  })
  window.modalInfo=new Vue({
    el:"#modal-info",
    data:{
      Info:''
    }
  })
  window.modalConfirm=new Vue({
    el:"#modal-confirm",
    data:{
      Info:'',
      onconfirmed:function() {
        
      }
    }
  })
  window.modalEdit=new Vue({
    el:"#modal-edit",
    data:{
      Title:'',
      Introduction:'',
      Cover:'',
      Vid:'',
      Clips:[
      {Title:'',Links:['']}
      ],
      testVideo:function(str) {
        document.getElementById("edit-v-test").src=str
      }
    }
  })
  setTimeout('doOnLoad()', 200)
  setTimeout("getNewData('1')", 200)

</script>
</body>
</html>